<template>
  <div class="app-container">
    <el-form ref="form" :model="formData" label-width="90px" style="width: 400px;">
      <el-form-item label="主题">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onAdd">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getOptions, add } from '@/api/theme'

export default {
  name: 'ThemeAdd',
  data() {
    return {
      formData: {
        name: '',
        pid: '0'
      },
      autoUpload: false,
    }
  },
  computed: {

  },
  props: ['pid'],
  created() {
    this.initFormData()
  },
  mounted() {
    
  },
  methods: {
    // 发布
    onAdd() {
      console.log(" add new theme")
      let data = {
        name: this.formData.name,
        parent_id: this.formData.pid
      }
      add(data).then(res => {
        this.$message.success("创建成功!!!")
        this.initFormData();
        this.$emit('close');
      })
    },
    // 主题选择
    themeChange() {
      this.formData.pid = this.selectOptons[this.selectOptons.length - 1];
    },
    // 初始化formData
    initFormData() {
      this.formData.name = ''
      this.formData.pid = 0
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .avatar-img {
    width: 40px;
    height: 40px;
    border: 2px solid #409EFF; 
    border-radius: 5px;
  }
  .el-button--text {
    padding-top: 0px;
    color: #7C796E;
  }
  .op-form {
    background: #F5F9FF;
    border: 1px dashed #CCCCCC;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 12px;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
</style>

